<template>
  <div class="aaa order-detail-container">
    <!-- 订单进度卡片 -->
    <el-card class="service-provider-card order-progress-card" style="max-width: 50%; margin-right: 20px;">
      <template #header>
        <div class="card-header">
          <h3>订单进度</h3>
        </div>
      </template>
      <div class="card-body">
        <el-steps style="max-width: 600px" :active="orderStatus.status" align-center class="order-progress-steps">
          <el-step v-for="item in ordersStatus" :title="item.name" :description="orderStatus.time"
                   class="order-step-item" />
        </el-steps>
      </div>
    </el-card>
    <!-- 订单信息卡片 -->
    <el-card class="service-provider-card order-info-card" style="max-width: 50%;">
      <template #header>
        <div class="card-header">
          <h3>订单服务信息</h3>
        </div>
      </template>
      <div class="card-body">
        <div style="display:inline-block; width: 47%;">
          <p class="order-info-item">序号：{{ orders.id }}</p>
          <p class="order-info-item">订单编号：{{ orders.ordersId }}</p>
          <p class="order-info-item">订单服务状态：
            <span v-if="orders.taskStatus === 0">待分配</span>
            <span v-else-if="orders.taskStatus === 1">待服务</span>
            <span v-else-if="orders.taskStatus === 2">服务中</span>
            <span v-else-if="orders.taskStatus === 3">已完成</span>
            <span v-else-if="orders.taskStatus === 4">被退单</span>
            <span v-else-if="orders.taskStatus === 5">已取消</span>
          </p>
          <p class="order-info-item">下单时间：
            <span v-if="orders.createTime == null">--</span>
            <span v-else>{{ orders.createTime }}</span>
          </p>
        </div>
        <div style="display: inline-block;width:6%;"></div>
        <div style="display:inline-block; width: 47%;">
          <p class="order-info-item">服务类型名称：
            <span v-if="orders.serveTypeName == null">--</span>
            <span v-else>{{ orders.serveTypeName }}</span>
          </p>
          <p class="order-info-item">服务名称：
            <span v-if="orders.serveName == null">--</span>
            <span v-else>{{ orders.serveName }}</span>
          </p>
          <p class="order-info-item">服务金额：
            <span v-if="orders.ordersAmount == null">--</span>
            <span v-else>{{ orders.ordersAmount }}</span>
          </p>
        </div>
      </div>
    </el-card>
    <!-- 服务记录卡片 -->
    <el-card class="service-record-card">
      <template #header>
        <div class="card-header">
          <h3>服务记录</h3>
        </div>
      </template>
      <div class="card-body">
        <p class="service-record-item">服务开始时间：{{ orders.realServeStartTime || '--' }}</p>
        <p class="service-record-item">服务开始说明：{{ orders.serveBeforeIllustrate || '--' }}</p>
        <p class="service-record-item">
          服务前图片：
          <span v-if="orders.serveBeforeImgs == null">--</span>
          <img :src="orders.serveBeforeImgs" style="width: 200px"
               class="service-before-image" />
        </p>
        <p class="service-record-item">服务结束时间：{{ orders.realServeEndTime || '--' }}</p>
        <p class="service-record-item">服务结束说明：{{ orders.serveAfterIllustrate || '--' }}</p>
        <p class="service-record-item">
          服务后图片：
          <span v-if="orders.serveAfterImgs == null">--</span>
          <img :src="orders.serveAfterImgs" style="width: 200px"
               class="service-after-image" />
        </p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from "vue-router";
import { getOneById} from "@/api/orders/order";

const route = useRoute();
const id = route.query.id;
console.log(id);

// 订单状态
const orderStatus = ref({
  status: null,
});
const orders = ref({});

const getOrderDetails = () => {
  getOneById(id).then(res => {
    console.log(res.data);
    orders.value = res.data.data;

    // 根据订单状态设置进度步骤的状态和时间
    if (orders.value.taskStatus == 0) {
      orderStatus.value.status = 1;
    } else if (orders.value.taskStatus == 1) {
      orderStatus.value.status = 2;
    } else if (orders.value.taskStatus == 2) {
      orderStatus.value.status = 3;
    } else if (orders.value.taskStatus == 3) {
      orderStatus.value.status = 4;
    } else if (orders.value.taskStatus == 4) {
      orderStatus.value.status = 5;
    } else if (orders.value.taskStatus == 5) {
      orderStatus.value.status = 6;
    }
  });
};
getOrderDetails();

const ordersStatus = ref([
  {
    name: '待分配',
    value: 0
  },
  {
    name: '待服务',
    value: 1
  },
  {
    name: '服务中',
    value: 2
  },
  {
    name: '已完成',
    value: 3
  },
  {
    name: '被退单',
    value: 4
  },
  {
    name: '已取消',
    value: 5
  },
]);
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.service-provider-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: white;
}

.order-progress-card,
.order-info-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.order-progress-steps {
  font-size: 14px;
  color: #666;
}

.order-step-item {
  margin-bottom: 10px;
}

.order-info-item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}
</style>
